<template>
	<div>
		<template>
			<el-table :data="shop_goods" border v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)" style="width: 100%">
				<el-table-column fixed prop="id" label="ID" width="80" align="center">
				</el-table-column>
				<el-table-column prop="date" label="商品图片" width="120" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.title_pic" width="50" height="50" class="head_pic" />
					</template>
				</el-table-column>
				<el-table-column prop="title" label="商品名称" width="120" align="center">
				</el-table-column>
				<el-table-column prop="modify_time" label="最近修改时间" width="180" align="center">
				</el-table-column>
				<el-table-column prop="cid" label="分类" width="100" align="center">
				</el-table-column>
				<el-table-column prop="price" label="售价(元)" width="100" align="center" :formatter="editMoney">
				</el-table-column>
				<el-table-column prop="sale_num" label="销量" width="100" align="center">
				</el-table-column>
				<el-table-column prop="view_num" label="浏览量" width="100" align="center">
				</el-table-column>
				<el-table-column prop="status" label="当前状态" width="90" :formatter="editStatus" align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作/切换状态" width="300" align="center">
					<template slot-scope="scope">
						<el-button size="mini" @click="lookShop(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="remveShop(scope.row)">删除</el-button>

						<!--<el-button @click="lookShop(scope.row)" type="text" size="small">查看</el-button>
						<el-button @click="remveShop(scope.row)" type="text" style="color: #ff6688;" size="small">删除</el-button>-->
						<el-button type="text" size="small">
							<el-switch v-model="scope.row.status_boolen" active-text="上架" inactive-text="下架" @change="changeSwitch(scope.row)">>
							</el-switch>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	export default {
		name: "mall-list",
		data() {
			return {
				value: false,
				shop_goods: [],
				status: 0,
				loading: true,
				page: 1,
			}
		},
		mounted: function() {
			var that = this;
			that.shopList();
		},
		methods: {
			//提示
			openHint(msg, type) {
				this.$message({
					message: msg,
					type: type
				});
			},
			//查看
			lookShop(row) {
				this.$router.push({
					path: '/shop-detail',
					name: 'sDetail',
					params: {
						id: row.id
					}
				})
			},
			//删除
			remveShop(row) {
				var that = this;
				this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function(res) {
					that.shopDelete(row);
				}).catch(function() {
					that.openHint("已取消", "success")
				});
			},
			//删除请求
			shopDelete: function(row) {
				var that = this;
				this.$axios.delete('/shop/shop_goods', {
						data: {
							id: row.id
						}
					})
					.then(function(res) {
						//console.log(res);
						if(res.data.code == 0) {
							that.openHint("删除成功", "success");
							that.shopList();
						}
					})
			},
			//商品列表
			shopList: function() {
				var that = this;
				this.$axios.get('/shop/shop_goods', {
						params: {
							page: this.page
						}
					})
					.then(function(res) {
						if(res.data.code == 0) {
							var shop_goods = res.data.data.map(function(item) {
								if(item.status == 0) {
									item.status_boolen = false;
								} else if(item.status == 1) {
									item.status_boolen = true;
								}
								return item;
							})
							that.shop_goods = shop_goods;
							that.loading = false;
						}
					}).catch(function(error) {
						//console.log(error);
					});

			},
			//上架转换
			editStatus: function(row, column) {
				return row.status == 1 ? '已上架' : row.status == 0 ? '已下架' : '未知';
			},
			//上下架切换
			changeSwitch(data) {
				//console.log(data);
				var that = this;
				if(data.status == 0) {
					this.status = 1;
				} else if(data.status == 1) {
					this.status = 0;
				}
				this.$axios.get('/shop/toggle_goods', {
					params: {
						id: data.id,
						status: this.status
					}
				}).then(function(res) {
					//console.log(res);
					if(res.data.code == 0) {
						that.openHint("已切换状态", "success");
						that.shopList();
					}
				}).catch(function(error) {
					that.openHint("切换失败", "error")
				});
			},
			//售价
			editMoney: function(row, column) {
				return row.price / 100
			},
		}
	}
</script>

<style scoped>
	.icon {
		margin: 20px;
	}
</style>